<template>
  <div class="HospitalPartTable">
    <el-table
      ref="storeGoods"
      :data="storeGoodsList"
      :header-cell-style="handleCellStyle"
      @selection-change="selectGoods"
    >
      <el-table-column type="selection" />
      <el-table-column label="商品" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div class="cus-column-commodity">
            <div class="left">
              <TableColumnGoodsImage :src="scope.row.goodsPic" :img-size="'60px'" />
            </div>
            <div class="right">
              <span style="display:inline-block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width:80px;">{{ scope.row.goodsName }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="门店" prop="storeName" :show-overflow-tooltip="true" />
      <el-table-column label="推广分成" prop="customDivide" />
      <el-table-column label="医院" prop="isHospital">
        <template slot-scope="scope">
          <el-checkbox ref="isHospital" v-model="scope.row.isHospital" true-label="1" false-label="0" @change="changeIsHospital(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="医院配送方式" prop="hospitalSend" width="150">
        <template slot-scope="scope">
          <el-checkbox-group v-model="scope.row.hospitalSend" @change="changeHospitalSend(scope.row)">
            <p><el-checkbox label="0">小时达</el-checkbox></p>
            <p v-if="scope.row.goodsType=='lease'"><el-checkbox label="1" @change="changeHospitalSelfSend">预约到桩自提</el-checkbox></p>
          </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column label="护工或其他" prop="isCareWorker">
        <template slot-scope="scope">
          <el-checkbox ref="isCareWorker" v-model="scope.row.isCareWorker" true-label="1" false-label="0" @change="changeIsCareWorker(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="护工配送方式" prop="carerSend" width="150">
        <template slot-scope="scope">
          <el-checkbox-group v-model="scope.row.carerSend" @change="changeCareSend(scope.row)">
            <p><el-checkbox label="0">小时达</el-checkbox></p>
            <p v-if="scope.row.goodsType == 'lease'"><el-checkbox label="1">预约到店自提</el-checkbox></p>
            <p><el-checkbox label="2">自提</el-checkbox></p>
            <p><el-checkbox label="3">预约送货上门</el-checkbox></p>
          </el-checkbox-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage'
export default {
  name: 'HospitalPartTable',
  components: { TableColumnGoodsImage },
  props: {
    storeGoodsList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selection: []
    }
  },

  methods: {
    setData(data, list) {
      if (data.length > 0) {
        const selectList = list
        console.log(selectList)
        this.storeGoodsList.forEach((item, index) => {
          if (data.includes(item.goodsId.toString())) {
            this.$nextTick(() => {
              this.$refs.storeGoods.toggleRowSelection(item)
              console.log(item)
            })
          }
        })
        this.storeGoodsList = selectList
        console.log(this.storeGoodsList)
      }
    },
    getData() {
      for (let i = 0; i < this.selection.length; i++) {
        if (this.selection[i].hospitalShow == 0 && this.selection[i].carerShow == 0) {
          this.$message.error('医院商品至少勾选一个推广类型')
          return
        }
        if (this.selection[i].hospitalShow == 1 && !this.selection[i].hospitalSend) {
          this.$message.error('医院商品勾选医院后至少勾选一个配送方式')
        }
        if (this.selection[i].carerShow == 1 && !this.selection[i].carerShow) {
          this.$message.error('医院商品勾选护工后至少勾选一个配送方式')
        }
      }
      return this.selection
    },
    /** 门店商品选择 */
    selectGoods(v) {
      this.selection = []
      const idList = []
      v.forEach(item => {
        idList.push(item.goodsId)
        this.selection.push({
          goodsId: item.goodsId,
          hospitalShow: item.isHospital,
          hospitalSend: item.hospitalSend.toString(),
          carerShow: item.isCareWorker,
          carerSend: item.carerSend.toString()
        })
      })
      console.log(this.selection)
    },
    /** 商品列表勾选状态变化*/
    changeIsHospital(data) {
      if (this.selection.length > 0) {
        const list = []
        this.selection.forEach(item => {
          list.push(item.goodsId)
          if (item.goodsId == data.goodsId) {
            item.hospitalShow = data.isHospital
          }
        })
        if (!list.includes(data.goodsId)) {
          this.storeGoodsList.forEach(item => {
            if (item.goodsId == data.goodsId) {
              item.isHospital = false
            }
          })
          return this.$message.error('选中该商品后再勾选医院推广')
        }
      } else {
        data.isHospital = false
        return this.$message.error('请先选中该商品')
      }
    },
    /** 商品列表勾选状态变化*/
    changeIsCareWorker(data) {
      if (this.selection.length > 0) {
        const list = []
        this.selection.forEach(item => {
          list.push(item.goodsId)
          if (item.goodsId == data.goodsId) {
            item.carerShow = data.isCareWorker
          }
        })
        if (!list.includes(data.goodsId)) {
          this.storeGoodsList.forEach(item => {
            if (item.goodsId == data.goodsId) {
              item.isCareWorker = false
            }
          })
          return this.$message.error('选中该商品后再勾选医院推广')
        }
      } else {
        data.isCareWorker = false
        return this.$message.error('请先选中该商品')
      }
    },

    changeHospitalSend(row) {
      if (this.selection.length > 0) {
        const list = []
        this.selection.forEach(item => {
          list.push(item.goodsId)
          if (item.goodsId == row.goodsId) {
            item.hospitalSend = row.hospitalSend.toString()
          }
        })
        if (!list.includes(row.goodsId)) {
          this.storeGoodsList.forEach(item => {
            if (item.goodsId == row.goodsId) {
              item.hospitalSend = ''
            }
          })
          return this.$message.error('选中该商品后再勾选医院推广再勾选医院配送方式')
        }
      } else {
        row.hospitalSend = []
        return this.$message.error('请先选中该商品')
      }
    },
    changeHospitalSelfSend() {
      this.$emit('changeStoreGoodsList', this.storeGoodsList)
    },

    changeCareSend(row) {
      if (this.selection.length > 0) {
        const list = []
        this.selection.forEach(item => {
          list.push(item.goodsId)
          if (item.goodsId == row.goodsId) {
            item.carerSend = row.carerSend.toString()
          }
        })
        if (!list.includes(row.goodsId)) {
          this.storeGoodsList.forEach(item => {
            if (item.goodsId == row.goodsId) {
              item.carerSend = ''
            }
          })
          return this.$message.error('选中该商品后再勾选护工或其他推广再勾选护工配送方式')
        }
      } else {
        row.carerSend = []
        return this.$message.error('请先选中该商品')
      }
    },

    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>

</style>
